<template>
  <nm-container>
    <el-form label-width="80px" :inline="true" style="padding-top:20px">
      <nm-button type="primary" @click="takeTicket" text="领 票" size="medium"></nm-button>
      <nm-button type="primary" @click="start(1)" text="启 用" size="medium"></nm-button>
      <nm-button type="primary" @click="start(0)" text="禁 用" size="medium"></nm-button>
      <!-- <nm-button type="primary" @click="getData" text="入 库" size="medium"></nm-button> -->
      <nm-button type="primary" @click="start(2)" text="作 废" size="medium"></nm-button>
    </el-form>

    <el-table ref="topictable" :max-height="tabheight" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;margin-top:30px" class="tableBox">
      <el-table-column label="" width="40">
        <template slot-scope="scope">
          <el-radio :label="scope.$index" v-model="radio" @change.native="currentRow(scope.row)" style="color: #fff;padding-left: 5px; "></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="userId" label="售票员">
        <template slot-scope="scope">
          <el-select v-model="scope.row.userId" placeholder="请选择" disabled>
            <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="operater" label="操作员"> </el-table-column>
      <el-table-column prop="startTicketNum" label="起票号"> </el-table-column>
      <el-table-column prop="currentTicketNum" label="当前票号"> </el-table-column>
      <el-table-column prop="remainTicket" label="剩余票数"> </el-table-column>
      <el-table-column prop="operationTime" label="操作时间"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 0 ? '禁用' : scope.row.status == 1 ? '启用' : '作废' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination background layout="prev, pager, next" :total="getList.total / 10" /> -->

    <el-dialog title="领票" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item size="small" label="售票员" :label-width="formLabelWidth" prop="userId">
          <el-select v-model="form.userId" placeholder="请选择">
            <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item size="small" label="当前票号" :label-width="formLabelWidth" prop="currentTicketNum">
          <el-input size="small" v-model="form.currentTicketNum"></el-input>
        </el-form-item> -->
        <el-form-item size="small" label="起票号" :label-width="formLabelWidth" prop="startTicketNum">
          <el-input size="small" type="number" oninput="if(value.length>8)value=value.slice(0,8)" v-model="form.startTicketNum"></el-input>
        </el-form-item>
        <el-form-item size="small" label="止票号" :label-width="formLabelWidth" prop="endTicketNum">
          <el-input size="small" type="number" oninput="if(value.length>8)value=value.slice(0,8)" v-model="form.endTicketNum"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="updates('form')">确 定</el-button>
      </span>
    </el-dialog>
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'

const api = $api.dispatch.bill_management

export default {
  name: page.name,
  mixins: [mixins.list],
  data() {
    return {
      radio: '',
      form: {
        userId: '',
        currentTicketNum: '',
        startTicketNum: '',
        endTicketNum: '',
      },
      // currentTicketNum: '', //当前票号
      options: [],
      id: '',
      status: '', //操作状态
      getList: [],
      dialogVisible: false,
      list: {
        title: page.title,
        cols,
        action: api.query,
        model: {
          /** 线路名称 */
          route_name: '',
        },
      },
      removeAction: api.remove,
      buttons: page.buttons,
      tabheight: 400,
      formLabelWidth: '80px',
      rules: {
        userId: { required: true, message: '请选择售票员', trigger: 'change' },
        // currentTicketNum: { required: true, message: '请输入当前票号', trigger: 'blur' },
        startTicketNum: { required: true, message: '请输入8位数起票号', min: 8, max: 8, trigger: 'blur' },
        endTicketNum: { required: true, message: '请输入8位数止票号', min: 8, max: 8, trigger: 'blur' },
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tabheight = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    // this.getBill()
    this.getTicketSeller()
    this.getBillList()
  },
  methods: {
    //选择报班记录
    currentRow(row) {
      this.id = row.id
      this.selectUser = row.userId
    },
    //关闭弹窗
    handleClose() {
      this.$refs.form.clearValidate()
      this.dialogVisible = false
      this.form = {}
    },
    //获取当前票号
    // getBill() {
    //   api.querycurrentuserbill({ status: 1 }).then((res) => {
    //     if (res.length > 0) {
    //       this.currentTicketNum = res[0].currentTicketNum
    //     }
    //   })
    // },
    //获取售票员
    getTicketSeller() {
      api.getmycompanyuser().then((res) => {
        this.options = res
      })
    },
    //获取售票员票据列表
    getBillList() {
      api.queryuserbill({ status: 99 }).then((res) => {
        this.getList = res
      })
    },
    //领票
    takeTicket() {
      // this.form.currentTicketNum = this.currentTicketNum
      this.dialogVisible = true
    },
    updates(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.currentTicketNum = this.form.startTicketNum
          api.sendbillforuser(this.form).then((res) => {
            if (res == true) {
              this.$message.success('领票成功')
              this.dialogVisible = false
              this.getBillList()
            }
          })
        }
      })
    },
    isOff() {
      var send = []
      this.getList.forEach((e) => {
        if (e.userId == this.selectUser && e.status == 1) {
          send.push(e)
        }
      })
      return send.length
    },
    //启用
    start(val) {
      if (this.id == '') {
        this.$message.warning('请选择一条数据')
      } else {
        if (val == 0) {
          api.changebillstatus({ id: this.id, status: 0 }).then((res) => {
            this.$message.success('禁用成功')
            this.getBillList()
          })
        } else if (val == 1) {
          if (this.isOff() == 0) {
            api.changebillstatus({ id: this.id, status: 1 }).then((res) => {
              this.$message.success('启用成功')
              this.getBillList()
            })
          } else {
            this.$message.error('该操作员已有启用票段')
          }
        } else {
          api.changebillstatus({ id: this.id, status: 2 }).then((res) => {
            this.$message.success('作废成功')
            this.getBillList()
          })
        }
      }
    },
  },
}
</script>
<style>
.tableBox .el-select .el-input .el-select__caret {
  display: none;
}
.tableBox .el-input.is-disabled .el-input__inner {
  color: #606266;
  border: none;
  background-color: #fff;
  text-align: center;
}
</style>
